<template>
	<view id="page">
		<nav-bar :navH="navH" :isTabar="false" :isHome="false" :pageName="title"></nav-bar>
        <view >
			<view class="store">
				<view class="col-9 lt">
					<image :src="detail.img" mode="widthFix" lazy-load="true" class='icon' @error="imgError" v-if="detail.img"></image>
					<image src="../../static/avatars_default.png" mode="widthFix" lazy-load="true" class='icon' v-else></image>
					<text>{{detail.name}}</text>
				</view>
				<view class="col-3 rt"><view class="btn" @click="setFllow(detail.user_id)" v-if="detail.is_attention == 0">关注</view><view class="btn" v-else>已关注</view></view>
			</view>
			<!-- 详情 -->
		    <view class='detail-cont'>
				<text style="display: block; font-weight: bold; padding-bottom: 20upx;">{{detail.title}}</text>
				<rich-text :nodes="detail.content"></rich-text>
				<swiper autoplay="true" @change="swiperChange" v-if="isSwiper">
					<block v-for="(it, k1) in detail.imgs" :key="k1">
						<swiper-item>
							<image :src="it" class="slide-image" mode="widthFix" lazy-load="true" @error="imgError2(k1)"/>
						</swiper-item>
					</block>
				</swiper>
		    </view>
		    <!-- 回答区 -->
		    <view class='comment'>
				<text class="cmt-count">回答</text>
				<view class='drop-cmt' @click='jumpTextarea'><text>您来留下点什么吧！</text></view>
				<block v-if="hasRes">
					<view class='cmt' v-for="(it, k4) in lists" :key="k4">
						<view class='head clearfloat'>
						    <view class='col-9 i'>
								<image :src="it.img" class='col-2' mode='widthFix' lazy-load="true" @error="imgError3(k4)" v-if="it.img"></image>
								<image src="../../static/avatars_default.png" class='col-2' mode='widthFix' lazy-load="true" v-else></image>
								<view class='col-10 io'><text style='font-size:32upx; color:#333; font-weight: bold;'>{{it.name}}</text><text>{{it.replay_time}}</text></view>
								<image src='../../static/4.png' mode="widthFix" lazy-load="true" class="vip"></image>
							</view>
						    <view class='col-3 z'>
								<text @click="getUse(k4, it.id)" v-if="qId == userInfo.id">采纳</text>
								<image src="../../static/26.png" mode="widthFix" lazy-load="true" v-if="it.replay_status == 1"></image>
						    </view>
						</view>
						<view class='body'>
							<text class='cont'>{{it.replay_content}}</text>
							<view class="pic">
								<block v-for="(it, k5) in it.replay_imgs" :key="k5"><image :src="it" mode="widthFix" lazy-load="true" @error="imgError4(k4, k5)" @click="previewImage(k4, it)"></image></block>
							</view>
						</view>
					</view>
				</block>
				<view class="nocont" v-else>暂无内容</view>
				<view class="nomore" v-if="isLoad"><image src='../../static/nomore_img.png' mode="widthFix"></image><text>没有更多了~</text></view>
			</view>
		    <!-- 底部菜单 -->
		    <view class="tools">
				<view class="col-4 chi" @click="goHome"><image src="../../static/15.png" lazy-load="true" class="icon"></image><text>首页</text></view>
				<view class="col-4 chi"><button open-type='share' plain="false" class="share"><image src="../../static/16.png" lazy-load="true" class="icon"></image><text>分享</text></button></view>
				<view class="col-4 chi" @click="answer(detail.id, detail.title)"><image src="../../static/18.png" lazy-load="true" class="icon"></image><text>回答</text></view>
		    </view>
		</view>
		<scope-box :isLogin="isLogin" @isShow="isShow"></scope-box>
	</view>
</template>

<script>
	import ComtBox from '../../components/comtbox/index.vue';
	import app from '../../common/index.js'
	export default {
		data() {
			return {
				title: '详情',
				navH: null,
				userInfo: {},
				isLogin: false,
				qId: '',  // 问题ID
				detail: {},
				hasRes: true,
				isLoad: false,
				page: 1,
				size: 5,
				lists: [],
				isSwiper: true,
			}
		},
		onLoad(options) {
			this.navH = this.$store.state.navHeight;
			this.qId = options.id;
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
			if(!this.userInfo.id) {
				this.isLogin = true;
			}
			this.getDetail();
			this.getAnswer();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.lists = [];
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
			this.getDetail();
			this.getAnswer();
			uni.stopPullDownRefresh();
		},
		// 上划加载
		onReachBottom() {
			if(!this.isLoad) {
				this.page = this.page + 1;
				this.getAnswer();
			}
		},
		// 分享转发
		onShareAppMessage() {
			return {
				title: this.detail.title,
				path: 'pages/qdetail/index?id='+ this.qId,
			}
		},
		components: {
			ComtBox,
		},
		methods: {
			/**
			 * @des 登录提示框
			 */
			isShow() {
				this.isLogin = false;
			},
			/**
			 * @des 问答详情
			 */
			getDetail() {
				app.request({
					url: 'entry/wxapp/QuestionDetail',
					data: {
						id: this.qId,
						user_id: this.userInfo.id,
					}
				}, (ret) => {
					let d = ret.data;
					this.detail = d;
				})
			},
			/**
			 * @des 获取回答列表
			 */
			getAnswer() {
				app.request({
					url: 'entry/wxapp/ReplayQuestionList',
					data: {
						question_id: this.qId,
						page: this.page,
						pagesize: this.size,
					},
				}, (ret) => {
					let d = ret.data, tmpData = this.lists, len = d.data.length;
					if (d.total > 0) {
						this.hasRes = true;
						this.lists = tmpData.concat(d.data);
						this.isLoad = len < this.size ? true : false;
					} else {
						this.hasRes = false;
					}
				})
			},
			/**
			 * @des 答案采纳
			 */
			getUse(i, aid) {
				app.request({
					url: 'entry/wxapp/Adoption',
					data: {id: aid}
				}, (ret) => {
					let d = ret.data;
					if(d.status == 1) {
						this.lists[i].replay_status = '1';
					}
				})
			},
			/**
			 * @des 回答问题
			 */
			answer(id, title) {
				// if(this.userInfo.grade == 2) {
					uni.navigateTo({
						url: '../release/index?qid=' + id + '&title=' + title +'&type=4'
					})
// 				}else {
// 					uni.showToast({
// 						title: '只有指定医生可回答此问题！'
// 					})
// 				}
			},
			/**
			 * @des 关注
			 */
			setFllow(id) {
				app.request({
					url: 'entry/wxapp/Attention',
					data: {
						guan_user: this.userInfo.id,
						bguan_user: id,
					}
				}, (ret) => {
					console.log(ret);
					this.detail.is_attention = 1;
				})
			},
			/**
			 * @des 预览图片
			 */
			previewImage(i, curImg) {
				uni.previewImage({
					urls: this.lists[i].replay_imgs,
					current: curImg,
				})
			},
			/**
			 * @des 处理错误图片
			 */
			imgError() {
				let tmpDetail = this.detail;
				tmpDetail.img = '../../static/avatars_default.png';
				this.detail = tmpDetail;
			},
			imgError2(i) {
				let tmpDetail = this.detail;
				tmpDetail.imgs.splice(i,1);
				this.detail = tmpDetail;
				if(tmpDetail.imgs.length === 0) {
					this.isSwiper = false;
				}
			},
			imgError3(i) {
				let tmpList = this.lists;
				tmpList[i].img = '../../static/avatars_default.png';
				this.lists = tmpList;
			},
			imgError4(i1, i2) {
				let tmpList = this.lists;
				tmpList[i1].replay_imgs.splice(i2,1);
				console.log(tmpList)
				
				this.lists = tmpList;
				
			},
		}
	}
</script>

<style>
	.swiper {position: relative; width: 100%;}
	swiper {height: 400upx; overflow: hidden;}
	video {width: 100%; margin-bottom: -40upx;}
	.dots {display: flex; flex-direction: center; position: absolute; left: 50%; transform: translateX(-50%); padding: 30upx 0;}
	/*未选中时的小圆点样式 */
	.dot {width: 18upx; height: 18upx; border-radius: 100%; margin-right: 15upx; background-color: rgba(0,0,0,.1);}
	/*选中以后的小圆点样式  */
	.active {width: 18upx; height: 18upx; background-color: #82d7d0;}
	/** 机构名称 **/
	.store {display: inline-block; width: 100%; padding: 20upx; vertical-align: middle; background-color: #fff;}
	.store view {display: inline-block;}
	.store .lt {text-align: left;}
	.store .lt image {width: 16%; border-radius: 100%; margin-right: 16upx;}
	.store .rt {text-align: right; vertical-align: middle;}
	.store .rt .btn {padding: 12upx 22upx; border-radius: 52upx; line-height: 1; background-color: #82d7d0; color: #fff;}
	.detail-cont {margin-top: 0; padding: 20upx 20upx 30upx; border-bottom: 0; text-align: left; background-color: #fff;}
	.comment {margin-top: 20upx;}
	.cmt .head .i {position: relative;}
	.cmt .head .i .vip {position: absolute; bottom: 0; left: 12%; width: 30upx;}
	.cmt .head .z image {width: 80upx; height: 0;}
	.cmt .body {margin-top: 20upx;}
	.cmt .body .pic {margin-top: 10upx; margin: 10upx -8upx 0;}
	.cmt .body .pic image {width: 25%; padding: 8upx;}
	/** 底部工具栏 **/
	.tools {position: fixed; bottom: 0; display: block; width: 100%; height: 91upx; border-top: 1px solid #ddd; background-color: #fff;}
	.tools .chi {position: relative; border-right: 1px solid #eee; text-align: center; vertical-align: middle;}
	.tools .chi:nth-child(3) {height: 91upx; border: 0; background-color: #82d7d0;}
	.tools .chi:nth-child(3) text {line-height: 91upx; color: #fff;}
	.tools .chi .icon {width: 30upx; height: 28upx; margin-right: 10upx;}
	.tools .chi text {color: #666; vertical-align: middle;}
	.tools .share {border: 0; line-height: 1; padding: 0;}
</style>
